<template>
    <el-dialog class="preview-modal" :model-value="props.value" title="预览" width="90%" @closed="props.closed">
        <div class="page-preview">
            <UIDesignerRender :ui-schema="props.uiSchema!" :context="context" />
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import type { PopupBoxProps } from '@great/utils';
import { createContext, type FullSchema, UIDesignerRender } from '@great/designer';

interface IProps extends PopupBoxProps {
    uiSchema: FullSchema;
}
const props = defineProps<IProps>();
const context = createContext();
</script>
<style scoped lang="scss">
.page-preview {
    position: relative;
    border: 1px solid var(--el-border-color);
    & > div {
        height: calc(100vh - 190px);
        overflow: auto;
    }
}
</style>
<style lang="scss">
.preview-modal {
    margin-top: 60px;
}
</style>
